<template>
	<view class="center">
		<u-gap height="5" bgColor="#eee"></u-gap>
		<view class="logo">
			<!-- <u-avatar :text="nickName"></u-avatar> -->
			<view class="logo-title">
				<text class="uer-name" v-if="token">Hi，{{ nickName }}</text>
				<text class="uer-name" v-else @click="goLogin">请登录</text>
			</view>
		</view>
		<u-gap height="5" bgColor="#eee"></u-gap>
		<view class="bg-white">
			<u-cell-group>
				<u-cell isLink title="修改密码"></u-cell>
			</u-cell-group>
		</view>
		<u-gap height="5" bgColor="#eee"></u-gap>
		<view class="bg-white">
			<u-cell-group>
				<u-cell isLink title="关于"></u-cell>
				<u-button id="shareBtn" open-type="share" >
					<u-cell isLink title="分享小程序"></u-cell>
				</u-button>
				<u-cell isLink title="用户协议及隐私说明"></u-cell>
			</u-cell-group>
		</view>
		<!-- <u-gap height="100" bgColor="#eee"></u-gap> -->
		<view class="bg-white" v-if="nickName">
			<view class="submit-btn">
				<text class="btn-add" @click="show = true">退出登录</text>
			</view>
<!-- 			<u-cell-group>
				<u-cell :titleStyle="{color: '#fff',backgroundImage: 'linear-gradient(to right, #2595f9, #1eb8ee)',
				boxShadow: '0 2px 3px 0px rgba(30,184,238,0.5)', textAlign: 'center',borderRaidus: '40upx' }" 
				title="退出登录" 
				@click="show = true"
				>
			</u-cell>
			</u-cell-group> -->
		</view>
		<u-action-sheet :actions="list" :show="show" @select="selectAction" @close="show = false" cancelText="取消"></u-action-sheet>
	</view>
</template>

<script>
	import store from '@/store'
	import {
		getSwiper
	} from '@/api/index'
	import {
		NICK_NAME,
		ACCESS_TOKEN
	} from '@/store/mutaction-types'

	export default {
		data() {
			return {
				token: uni.getStorageSync(ACCESS_TOKEN),
				nickName: uni.getStorageSync(NICK_NAME),
				list: [{
					name: '退出登录'
				}],
				show: false
			}
		},
		created() {
			this.getSwiperList()
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '污染防治综合监管',
				path: 'pages/index/index'
			}
		},
		onLoad(){
		    uni.showShareMenu({
		        withShareTicket:true,
		        //设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
		        menus:["shareAppMessage","shareTimeline"]
		    })
		},
		methods: {
			// onShare (name) {
			// 	uni.$u.mpShare = {
			// 		title: '智慧巡检',
			// 		path: 'pages/index/index'
			// 	}
			// },
			getSwiperList() {
				const app = this
				getSwiper().then(res => {
				}).catch(error => {
					console.log(error)
				})
			},
			selectAction(index) {
				uni.showModal({
					title: "提示",
					content: "是否退出登录",
					showCancel: false,
					success: config => {
						if (config.confirm) {
							store.dispatch('Logout').then(res => {
								uni.reLaunch({
									url: '/packageC/login/login'
								})
							}).catch(error => {
								uni.$u.toast(error)
							})
						}
					}
				})
			},
			goLogin() {
				uni.navigateTo({
					url: '/packageC/login/login'
				})
			}
		}
	}
</script>

<style lang="scss">
	
	.submit-btn {
		position: fixed;
		bottom: 300upx;
		left: 0;
		width: 100%;
		.btn-add {
			display: block;
			width: 50%;
			height: 72upx;
			line-height: 72upx;
			background-color: #55aaff;
			margin: 18upx auto;
			border-radius: 20upx;
			text-align: center;
			font-size: 32upx;
			color: #fff;
			background-image: linear-gradient(to right, #2595f9, #1eb8ee);
			box-shadow: 0 1px 4px 0px rgba(30,184,238,0.3);
			// background-color: #4188f0;
		}
	}
	.center {
		height: 100vh;
		flex-direction: column;
		background-color: $uni-bg-color-grey;
	}

	.logo {
		width: 750upx;
		height: 240upx;
		padding: 20upx 20upx 20upx 40upx;
		box-sizing: border-box;
		background-size: cover;
		display: flex;
		flex-direction: row;
		align-items: center;
		background: url(https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/line-bg.png) no-repeat center bottom #4188f0;
		background-size: 100% auto;
		color: #fff;
	}

	.logo-hover {
		opacity: 0.8;
	}

	.logo-img {
		width: 150upx;
		height: 150upx;
		border-radius: 150upx;
	}

	.logo-title {
		height: 150upx;
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		margin-left: 40upx;
		font-weight: 700;
	}

	.uer-name {
		height: 60upx;
		line-height: 60upx;
		font-size: 38upx;
	}

	.go-login.navigat-arrow {
		font-size: 38upx;
	}

	.login-title {
		height: 150upx;
		align-items: self-start;
		justify-content: center;
		flex-direction: column;
		margin-left: 20upx;
	}

	.bg-white {
		background-color: $uni-bg-color;
	}

	.user-box {
		background-color: #fff;
	}
	.u-button--normal {
		padding: 0 !important;
	}
	.u-button--normal .u-cell {
		width: 100% !important;
		text-align: left !important;
	}
</style>
